Gyazo Game Explore UIデザイン

概要

Gyazo Game Exploreはゲームのスクリーンキャプチャー共有のためのページ。Gyazoをただの撮影ツールではなく、コンテンツ共有のためのプラットフォームとして成長させるために企画された。そこでユーザーは人気ゲーム6タイトルのキャプチャー画像を投稿や閲覧することができる。 キャプチャーの投稿UIと閲覧UIの開発が必要で、その両方においてゲーマーの没入感を獲得することが求められる。

＜プロジェクトの概念図＞

担当

UI / UXデザイン

ランディングページデザイン

グラフィックデザイン

スタイル実装

プラットフォーム

Web

期間

3ヶ月

プロセス

世界観の確認

今回に限っては動線の設計よりも先にグラフィックの雰囲気を作成した。ゲーム感満載の雰囲気をガツンと社内に共有することで、チームがこのページに対して持つ世界観の意識を統一したかった。ムードボードに近い役割かもしれない。

キャプチャ ー画像の閲覧ページとは別にゲーマーに特化したランディングページも同時に提案し、最終的なゴールをざっくりと表現してみた。

動線の作成

繊維図を使って閲覧→Gyazoダウンロード→撮影→投稿の流れを全体で確認。メンバー間で同意がとれたタイミングで機能実装とスタイルデザインを並行して進める。

https://gyazo.com/a86a66df9bb89cddef73a7aafd6fa438

https://gyazo.com/9134142e9c2452e6a38f6cb8027b9257

https://gyazo.com/8d7b01c20110846a97dfd23a2020f106

https://gyazo.com/3cdadc3f617741abab764efd738fdb32

スタイルの詰め

Gyazoを撮影ツールとして使ってきたユーザーに、Gyazo Game Exploreのコンセプトを初見で伝える必要がある。各ゲームタイトルごとに初見限定のバナーを用意し、メッセージを表示した。

投稿のインセンティブを強めるための工夫をいくつか追加した

スタッフが投稿されたキャプチャーから優れたものを選出するピックアップコーナーを設置し、通常のタイムラインに比べて特別な位置付けを与えた。

反応の多いキャプチャーにランクを与え、リーダーボードとして配置。

チャレンジ

投稿用のモーダル設計に苦戦した。

初めはグリッド状に表示されたサムネールからキャプチャーを選択するような仕様を考えていた。

ところがゲームのキャプチャーは似たような内容をなんども撮影するため、小さなサムネールから投稿したい画像を選択することは困難であることがわかった。

そのため、キャプチャー単体の視認性と一覧の俯瞰性のちょうど良いバランスを取るために、簡単なホットモックを作成した。

実際に想定される類のコンテンツを使い、様々なパターンの表示方法の検証を行った。

https://i.gyazo.com/135b0fa84989b3deef66e140ed00f5e2.mp4

最終

最終の画像

https://gyazo.com/824212f61b27e2218b96c38075e509a6

https://gyazo.com/8b8cd253529ec25b44e15efc5c450d23

成果

リリースから3ヶ月、当初期待していたほどの訪問者・投稿数を獲得できていない。今のところ結果としては成功とは言い難い。

解析結果とメンバーとの議論の結果、原因はコンテンツの魅力不足にあると結論づけた。

ゲームキャプチャーを価値あるコンテンツとして扱う場合、特定の文脈の元に提供する必要があることが分かった。例えば、

お気に入りのプレイヤーのプレイキャプチャー

自分が知りたいノウハウなどを共有したキャプチャー

など

人によって価値が異なるであろう画像をただ漠然と表示しても、ほとんどの場合閲覧者の心には刺さらない。

反省点

操作フローや魅力的な見せ方には注力していたが、ユーザーがどういう感情を持ってこのページを楽しむのかという根本的な体験の検証が欠如していた。

見て欲しい、投稿して欲しい、というのはあくまで開発側の希望にすぎない。

具体的にMVPとして何を作ればよかったのか、という疑問については最適解がまだない。今後の課題。